<template>
	<view class="content">
        <mine-head title=""  :background="background" :borderBottom="false" back-icon-color="#fff"></mine-head>
		<view class="titleT">#{{topic}}</view>
        <view class="list" v-for="(item,index) in indexList" :key="index" @click="goTo('/pages/comB/community/view?id=' + item.id)">
            <view class="item">
                <view class="top" @click.stop="goTo('/pages/comB/community/home?id=' + item.user.id)">
                    <view class="pic fl"><image :src="baseUrl + item.user.photo" mode=""></image></view>
                    <view class="text">
                        <view class="name">{{item.user.nickName}}</view>
                        <view class="time"><text v-if="item.recommend==1">推荐</text>{{item.createTime}}</view>
                    </view>
                </view>
                <view class="bot">
                    <view class="textC clamp4">
                       {{item.content}}
                    </view>
                    <view class="img">
                        <view class="pic" v-for="(img,index2) in item.mulImg" @click.stop="imgPreview(item.mulImg,img,index2)" :key="index2"><image :src="baseUrl + img" mode=""></image></view>
                    </view>
                    <view class="info">#{{item.topic}}</view>
                    <view class="btn">
                        <view :class="{on:item.isLike}" @click.stop="onLike(item.isLike,item.id,index)">{{item.likeCount}}</view>
                        <view>{{item.replyCount}}</view>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import config from '@/utils/config';
	export default {
		data() {
			return {
				page:1,
				baseUrl:config.host1,
                topic:null,
                indexList:[],
				background:{
					backgroundColor:'transparent'
				}
			};
		},
        onShow() {
        	
        },
        onLoad(option) {
            this.topic=option.id
            this.getList()
        },
        onReachBottom() {
            this.page=this.page+1
            this.getList()
        },
        methods:{
			imgPreview(list,url,index) {
				let arr = []
				list.forEach((item, index) => {
					if (item) {
						let str = this.baseUrl +item
						arr.push(str)
					}
				})
				// let index = arr.findIndex(value => value == url)
				console.log(index)
				uni.previewImage({
					current: index,
					urls: arr,
				});
			},
            goTo(url){
                uni.$_navFn('to',url)
            },
            onLike(key,id,index){
                let that = this;
                let p = {
                    dynamicId:id
                }
                uni.$_post({
                    url: key?'cancel-like':'is-like',
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            that.indexList[index].isLike=!that.indexList[index].isLike
                            key?that.indexList[index].likeCount=that.indexList[index].likeCount-1:that.indexList[index].likeCount=that.indexList[index].likeCount+1
                        }
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
                
            },
            getList() {
            	let that = this;
                let p = {
                    topic:that.topic,
                    pageNo:that.page,
                    pageSize:5
                }
                uni.$_post({
                    url: "toPic-list",
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            var list=[]
                            that.indexList.forEach(item => {
                                list.push(item)
                            })
                            res.data.records.forEach(item => {
                                list.push(item)
                            })
                            that.indexList = list
                            console.log(that.indexList,666)
                        }  
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
        }
	}
</script>

<style lang="scss">
    .content{
        padding: 30rpx 30rpx;
        background: #fff url("/static/img/community/indexbg.jpg") no-repeat top center / 100%;
        min-height: 100vh;
        box-sizing: border-box;
        .titleT{
            font-size: 40rpx;
            font-weight: bold;
            color: #111111;
            line-height: 62rpx;
            margin-bottom: 60rpx;
        }
        .list{
            .item{
                margin-bottom: 30rpx;
                .top{
                    margin-bottom: 20rpx;
                    overflow: hidden;
                    .pic{
                        width: 85rpx;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 20rpx;
                        &::before{
                            padding-top: 100%;
                        }
                    }
                    .text{
                        overflow: hidden;
                        padding-top: 5rpx;
                        .name{
                            font-size: 30rpx;
                            color: #999999;
                            line-height: 32rpx;
                            margin-bottom: 15rpx;
                        }
                        .time{
                            font-size: 22rpx;
                            color: #959595;
                            line-height: 28rpx;
                            text{
                                padding: 0 10rpx;
                                background: #fadfde;
                                border-radius: 30px;
                                height: 28rpx;
                                font-size: 18rpx;
                                color: #ee7671;
                                margin-right: 8rpx;
                            }
                        }
                    }
                }
                .bot{
                    margin-left: 105rpx;
                    border-bottom: 1rpx solid #e5e5e5;
                    padding-bottom: 30rpx;
                    .textC{
                        margin-bottom: 25rpx;
                        font-size: 28rpx;
                        line-height: 40rpx;
                        color: #000000;
                    }
                    .img{
                        overflow: hidden;
                        margin-bottom: 15rpx;
                        .pic{
                            display: inline-block;
                            margin: 0 10rpx 10rpx;
                            width: calc(33.3333% - 20rpx);
                            &::before{
                                padding-top: 100%;
                            }
                        }
                        .pic:nth-child(3){
                            margin-right: 0;
                        }
                    }
                    .info{
                        font-size: 28rpx;
                        color: #647fd6;
                        line-height: 34rpx;
                        margin-bottom: 25rpx;
                    }
                    .btn{
                        overflow: hidden;
                        view{
                            font-size: 24rpx;
                            line-height: 30rpx;
                            color: #aaaaaa;
                            margin-right: 42rpx;
                            padding-left: 50rpx;
                            background: url("/static/img/community/zan.png") no-repeat center left / 32rpx;
                            float: left;
                            display: inline;
                        }
                        view:nth-child(1).on{
                            background-image: url("/static/img/community/zanh.png");
                        }
                        view:nth-child(2){
                            background-image: url("/static/img/community/pl.png");
                        }
                    }
                }
                .bot:last-child{
                    border-bottom: none;
                }
            }
        }
    }
</style>
